//左中 服务区域人数月数据统计
(function () {
    //1.实例化对象
    var myChart = echarts.init(document.querySelector('#month_statistics'));
    //2.指定配置项和数据

    $.ajax({
        url: "../statistics/bymonth",
        type: "post",
        dataType: "json",
        success: function (data) {
            console.log(data)
            var option = {

                //color设置线条颜色 注意后面为数组
                color:["#00f2f1","#ed2f35"],

                //图表提示框组件
                tooltip: {
                    //触发方式
                    trigger: 'axis'
                },
                //图例组件
                legend: {
                    // orient: 'vertical',
                    //left: 10,
                    textStyle:{
                        color :"rgba(255,255,255,0.6)",
                        fontSize: fontSize(0.12),
                    },
                    right:'2%',
                    top:'13%',
                    //series里面有了name值 legend里面的data可以删除
                },
                //网格配置 grid可以控制线形图等图表大小
                grid: {
                    top:'30%',
                    left: '3%',
                    right: '4%',
                    // left: '2%',
                    // right: '2%',
                    bottom: '3%',
                    show:true,
                    borderColor:'#012f4a',
                    //是否显示刻度标签 true显示反之
                    containLabel: true,

                },
                //工具箱组件 可以另存为图片等功能
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                //设置x轴的相关配置
                xAxis: {
                    //category显示类目 value显示数值
                    type: 'category',
                    axisLabel:{
                        color:"rgba(255,255,255,0.6)",
                        fontSize: fontSize(0.12),
                    },
                    axisTick:{
                        show:false
                    },
                    axisLine:{
                        show:false
                    },
                    //是否让线条与坐标轴有缝隙
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                },
                yAxis: {
                    type: 'value',
                    //设置刻度标签颜色
                    axisLabel:{
                        color:"rgba(255,255,255,0.6)",
                        fontSize: fontSize(0.12),
                    },
                    axisTick:{
                        show:false
                    },
                    splitLine:{
                        lineStyle:{
                            color:'#012f4a'
                        },

                    },
                },
                //系列图表配置 决定显示哪种类型的图表
                series: [

                    {
                        name: '居家机构',
                        type: 'line',

                        data: data,
                        smooth: true ,
                    },
                ]
            };
//3.把配置项给实例对象
            myChart.setOption(option);
            //4、让图表自适应屏幕
            window.addEventListener("resize",function () {
                    myChart.resize();
                }
            )
        }
    })

})();

function fontSize(res){
    let docEl = document.documentElement,
        clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 2080);
    return res*fontSize;
}

